
<template>
  <div class="agent-container">
    <el-radio-group v-model="radio2" class="mb-4">
      <el-radio-button value="AgentManagement">代理商管理</el-radio-button>
      <el-radio-button value="AreaManagement">行政区域管理</el-radio-button>
      <el-radio-button value="BasicSetting">基础设置</el-radio-button>
    </el-radio-group>

    <component
      :is="currentComponent"
      v-if="currentComponent"
      @performance-stats="handlePerformanceStats"
      @agent-back="handletoagent"
      :info="currentAgentInfo"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch, shallowRef, markRaw } from 'vue'
import AgentManagement from './components/AgentManagement.vue'
import AreaManagement from './components/AreaManagement.vue'
import BasicSetting from './components/BasicSetting.vue'
import Statistics from './components/statistics.vue'

// 定义组件名，使keep-alive能够正确识别并缓存
defineOptions({ name: 'MallAgent' })

const state = reactive({
  radio2: 'AgentManagement',
  showStatistics: false,
  currentAgentInfo: {} as any
})

const { radio2, showStatistics, currentAgentInfo } = toRefs(state)

// 使用 shallowRef 来存储组件，减少不必要的深层响应
const components = {
  AgentManagement: markRaw(AgentManagement),
  AreaManagement: markRaw(AreaManagement),
  BasicSetting: markRaw(BasicSetting),
  Statistics: markRaw(Statistics)
}

// 当前显示的组件
const currentComponent = shallowRef(components[radio2.value])

// 监听 radio2 的变化
watch(radio2, (newValue) => {
  if (newValue === 'AgentManagement' && showStatistics.value) {
    showStatistics.value = false
  }
  currentComponent.value = components[newValue]
})

// 处理业绩统计事件
const handlePerformanceStats = (row: any) => {
  console.log('20252025年06月16日18:54:04:00', row)

  currentAgentInfo.value = row
  showStatistics.value = true
  currentComponent.value = components.Statistics
}

// 处理返回事件
const handletoagent = () => {
  showStatistics.value = false
  currentComponent.value = components[radio2.value]
}
</script>

<style scoped>
.agent-container {
  height: 100%;
}
</style>
